<template>
  <view class="regist">
    <view class="regist_label">油站名称</view>
    <view class="regist_item">
      <AtInput
        name='platName'
        size="small"
        placeholder='请输入油站名称'
        :value="plat_name"
        @change="inputPlatName"
      />
    </view>
    <view class="regist_label">联系人</view>
    <view class="regist_item">
      <AtInput
        name='username'
        size="small"
        placeholder='请输入联系人姓名'
        :value="username"
        @change="inputUserName"
      />
    </view>
    <view class="regist_label">联系电话</view>
    <view class="regist_item">
      <AtInput
        name='mobile'
        size="small"
        placeholder='请输入联系人电话'
        :value="mobile"
        @change="inputMobile"
      />
    </view>
    <view class="regist_label">邀请人电话</view>
    <view class="regist_item">
      <AtInput
        name='invite'
        size="small"
        placeholder='请输入邀请人电话'
        :value="invite_mobile"
        @change="inputInviteMobile"
      />
    </view>
    <view class="regist_label">收款人身份证照片(正面)</view>
    <view class="regist_item">
      <AtImagePicker
        :files="idcardFront"
        :onChange="onChangeFront"
        :showAddBtn="idcardFront.length == 0"
      />
    </view>
    <view class="regist_label">收款人身份证照片(反面)</view>
    <view class="regist_item">
      <AtImagePicker
        :files="idcardRear"
        :onChange="onChangeRear"
        :showAddBtn="idcardRear.length == 0"
      />
    </view>
    <view class="regist_label">银行卡照片</view>
    <view class="regist_item">
      <AtImagePicker
        :files="bankCard"
        :onChange="onChangeBank"
        :showAddBtn="bankCard.length == 0"
      />
    </view>
    <view class="regist_label">银行卡卡号</view>
    <view class="regist_item">
      <AtInput
        name='bankName'
        size="small"
        placeholder='请输入银行卡卡号'
        :value="bankName"
        @change="inputBankName"
      />
    </view>
    <view class="regist_label">加油站罩棚照片</view>
    <view class="regist_item">
      <AtImagePicker
        :files="shellPic"
        :onChange="onChangeShell"
        :showAddBtn="shellPic.length == 0"
      />
    </view>
    <view class="regist_label">加油站收银台照片</view>
    <view class="regist_item">
      <AtImagePicker
        :files="cashierPic"
        :onChange="onChangeCashier"
        :showAddBtn="cashierPic.length == 0"
      />
    </view>
    <view class="regist_label">是否需要终端机
      <view class="label_slot">
        <AtSwitch :checked="is_pos" :onChange="onChangeIsPos"/>
      </view>
    </view>
    <view class="regist_label nobd_label" v-if="is_pos">需要终端机数量
      <AtInputNumber :min="0" :max="10" :step="1" :value="pos_num" :onChange="onChangePosNum"/>
    </view>
    <view class="regist_label" v-if="is_pos">收货地址</view>
    <view class="regist_item" v-if="is_pos">
      <AtInput
        name='address'
        size="small"
        placeholder='请输入收货地址'
        :value="address"
        @change="inputAddress"
      />
    </view>
    <view style="margin-bottom:100px"> &nbsp;</view>
    <view class="submit_button">
      <AtButton type='primary' size='normal' full @click="submit()">提 交</AtButton>
    </view>
    <AtToast :isOpened="showToast" :text="toastMsg" status="error"></AtToast>
    <AtToast :isOpened="showLoading" text="正在上传" status="loading"></AtToast>
    <AtModal
      :isOpened="showSuccess"
      title='提交成功'
      confirmText='确认'
      :onClose="handleConfirm"
      :onConfirm="handleConfirm"
      content='资料提交成功，请等待审核。'
    />
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import { uploadFile } from '../../utils/uploadFile'
import './regist.module.scss'
import LoginAPI from '../../api/login.js'
export default {
  name: 'regist',
  data(){
    return{
      idcardFront: [], // 身份证正面
      idcardRear: [], // 身份证背面
      bankCard: [], // 银行卡
      bankName: "", // 银行卡开户行
      shellPic: [], // 加油站罩棚
      cashierPic: [], // 加油站收银台
      showToast: false, // 显示loading
      toastMsg: "", //loading文字
      plat_name: "", // 油站名称
      username: "", // 联系人
      mobile: "", // 联系人电话
      invite_mobile: "", // 邀请人电话
      is_pos: false, // 是否需要终端
      pos_num: 1, // 需要终端机数量
      showLoading: false, // 上传图片loading
      address: "", // 收货地址
      showSuccess: false, // 提交资料成功
    }
  },
  mounted(){
  },
  methods:{
    async onChangeFront (files) { // 上传身份证正面
      if(files.length){
        this.showLoading = true;
        const res = await uploadFile(files[0]);
        if(res.code == 200){
          this.idcardFront = [{url: res.data.url}]
        }
        this.showLoading = false;
      }else{
        this.idcardFront = [];
      }
    },
    async onChangeRear (files) { // 上传身份证背面
      if(files.length){
        this.showLoading = true;
        const res = await uploadFile(files[0]);
        if(res.code == 200){
          this.idcardRear = [{url: res.data.url}]
        }
        this.showLoading = false;
      }else{
        this.idcardRear = [];
      }
    },
    async onChangeBank (files) { // 上传银行卡照片
      if(files.length){
        this.showLoading = true;
        const res = await uploadFile(files[0]);
        if(res.code == 200){
          this.bankCard = [{url: res.data.url}]
        }
        this.showLoading = false;
      }else{
        this.bankCard = [];
      }
    },
    inputBankName(val) { // 输入银行卡开户行
      this.bankName = val;
    },
    async onChangeShell(files) { // 上传加油站罩棚照片
      if(files.length){
        this.showLoading = true;
        const res = await uploadFile(files[0]);
        if(res.code == 200){
          this.shellPic = [{url: res.data.url}]
        }
        this.showLoading = false;
      }else{
        this.shellPic = [];
      }
    },
    async onChangeCashier(files) { // 上传收银台照片
      if(files.length){
        this.showLoading = true;
        const res = await uploadFile(files[0]);
        if(res.code == 200){
          this.cashierPic = [{url: res.data.url}]
        }
        this.showLoading = false;
      }else{
        this.cashierPic = [];
      }
    },
    inputPlatName(val) { // 输入油站名称
      this.plat_name = val;
    },
    inputUserName(val) { // 输入联系人
      this.username = val;
    },
    inputMobile(val) { // 输入联系人电话
      this.mobile = val;
    },
    inputInviteMobile(val) { // 输入邀请人电话
      this.invite_mobile = val;
    },
    onChangeIsPos(val) { // 是否需要终端机
      this.is_pos = val;
    },
    onChangePosNum(val) { // 需要终端机数量
      this.pos_num = val;
    },
    inputAddress(val) {
      this.address = val;
    },
    async submit(){
      this.showLoading = true;
      if(this.plat_name == "") {
        this.openToast("未填写加油站名称");
      }else if(this.username == "") {
        this.openToast("未填写联系人姓名");
      }else if(this.mobile == "") {
        this.openToast('未填写联系人电话');
      }else if(this.idcardFront.length == 0){
        this.openToast('未上传身份证照片(正面)');
      }else if(this.idcardRear.length == 0){
        this.openToast('未上传身份是照片(反面)');
      }else if(this.bankCard.length == 0){
        this.openToast('未上传银行卡照片');
      }else if(this.bankName == ""){
        this.openToast('未填写银行卡卡号');
      }else if(this.shellPic.length == 0){
        this.openToast('未上传加油站罩棚照片');
      }else if(this.cashierPic.length == 0){
        this.openToast('未上传加油站收银台照片');
      }
      var data = {
        token: Taro.getStorageSync('token'),
        app_id: Taro.getStorageSync('app_id'),
        plat_name: this.plat_name,
        username: this.username,
        mobile: this.mobile,
        invite_mobile: this.invite_mobile,
        id_front_pic: this.idcardFront[0].url,
        id_back_pic: this.idcardRear[0].url,
        is_pos: this.is_pos? "1":"0",
        num: this.is_pos? this.pos_num:"0",
        address: this.address,
        license_id: this.shellPic[0].url,
        card_num: this.bankName,
        card_id: this.bankCard[0].url,
        cashier_id: this.cashierPic[0].url
      }
      console.log(data);
      const res = await LoginAPI.submitRegister(data);
      this.showLoading = false;
      if(res.code == 200) {
        this.showSuccess = true;
      }else{
        this.showToast = true;
        this.toastMsg = res.msg;
      }
    },
    handleConfirm(){
      this.showSuccess = false;
    },
    openToast(t){
      this.toastMsg = t;
      this.showToast = true;
      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },
  },
}
</script>